/**
 * 目标1：信息渲染
 *  1.1 获取用户的数据
 *  1.2 回显数据到标签上
 * */
const creator = 'xpp'
function render() {
    axios({
        url: 'http://hmajax.itheima.net/api/settings',
        params: {
            creator
        }
    }).then(res => {
        // const { avatar, desc, email, gender, nickname } = res.data.data
        // document.querySelector('.email').value = email
        // document.querySelector('.nickname').value = nickname
        // document.querySelector('.desc').value = desc
        // document.querySelector('.prew').src = avatar
        // const genderCk = document.querySelectorAll('.gender')
        // gender == 0 ? genderCk[0].checked = true : genderCk[1].checked = true

        const obj = res.data.data
        Object.keys(obj).forEach((key) => {
            if (key === 'gender') {
                document.querySelector(`[name=gender][value="${obj[key]}"]`).checked = true
            } else if (key === 'avatar') {
                // 修改头像
                const url = localStorage.getItem('imgUrl')
                if (url) {
                    document.querySelector('.prew').src = url
                } else {
                    document.querySelector('.prew').src = obj[key]
                }

            } else {
                document.querySelector(`.${key}`).value = obj[key]
            }
        })


    }).catch(err => { console.log(err); })
}
render()




/**
 * 目标2：修改头像
 *  2.1 获取头像文件
 *  2.2 提交服务器并更新头像
 * */

document.querySelector('#upload').addEventListener('change', function ({ target: { files } }) {
    const file = files[0]
    const fd = new FormData()
    fd.append('img', file)
    // fd.append('creator', creator)
    // 需要通过遍历foreach  获取成员
    fd.forEach((v, k) => {
        console.log(k, v);
    })
    axios({
        url: 'http://hmajax.itheima.net/api/uploadimg',
        method: 'POST',
        data: fd

    }).then(res => {
        console.log(res.data.data);
        const url = res.data.data.url
        localStorage.setItem('imgUrl', url)
        document.querySelector('.prew').src = url
    }).catch(err => {
        console.log(err);
    })

})






/**
 * 目标3：提交表单
 *  3.1 收集表单信息
 *  3.2 提交到服务器保存
 */
document.querySelector('.submit').addEventListener('click', function () {
    const userForm = document.querySelector('.user-form')
    const formObj = serialize(userForm, { hash: true, empty: true })
    console.log({ ...formObj });
    formObj.gender = +formObj.gender
    axios({
        url: 'http://hmajax.itheima.net/api/settings',
        method: 'PUT',
        data: { ...formObj, creator }
    }).then(res => {
        // 提示操作成功
        const toastDom = document.querySelector('.toast')
        const toast = new bootstrap.Toast(toastDom)
        toast.show()
        render()
        console.log(res);

    }).catch(err => { console.log(err); })
})



/**
 * 目标4：结果提示
 *  4.1 创建toast对象
 *  4.2 调用show方法->显示提示框
 */
//清提示






